<template>
	<div class="web-content">
		<div class="body" v-if="get_data">
			<div class="container">
				<!-- ico 信息以及评分 -->
				<div class="container-box">
					<div class="content-box">
						<div class="row">
							<div class="col-md-6">
								<img :src="ico_info.icon_url" class="ico-img">
								<div class="ico-name-box">
									<h3 class="name">{{ico_info.name}}</h3>
									<span class="name-en">{{ico_info.symbol}}/{{ico_info.slug}}</span>
								</div>
							</div>
							<div class="col-md-6">
								<span class="number-info">评分: <span class="fenshu">{{ico_info.rating|defaultRating}}</span> </span>
							</div>
						</div>
					</div>
				</div>
				<!-- ICO 简介 -->
				<div class="container-box">
					<div class="top-box">
						<h2 class="box-title-ico"><span class="box-title-span">项目简介</span></h2>
					</div>
					<div class="content-box">
						<div class="box-text">
							{{currency_detail.desc}}
						</div>
					</div>
				</div>
			</div>
			<!-- 锚点nar bar -->
			<web-ico-nav-bar></web-ico-nav-bar>
			
			<!-- 项目 -->
			<template v-for="(item,$index) in data">
				<template v-if="item.info_group_type === 'table_obj'&& item.info_category!=null && item.info_category==='project'">
					<page-table :tabledata="item.data" :id="item.info_category"></page-table>
				</template>
				<template v-if="item.info_group_type==='desc' && item.info_category==='project'">
					<page-desc :descdata="item" :id="item.info_category"></page-desc>
				</template>
				<template v-if="item.info_group_type==='chart' && item.info_category==='project'">
					<page-chart :chartsdata="item" :id="item.info_category"></page-chart>
				</template>
				<template v-if="item.info_group_type==='team' && item.info_category==='project'">
					<page-team :teamdata="item.chunk_data"></page-team>
				</template>
			</template>
			
			<!--市场 -->
			<page-market></page-market>
			
			<template v-for="(category, $index) in categoryData.slice(2,-1)">
				<template v-for="(item,$index) in data">
					<template v-if="item.info_category===category.label">
						<template v-if="item.info_group_type==='table_obj'">
							<page-table :tabledata="item.data" :id="item.info_category"></page-table>
						</template>
						<template v-if="item.info_group_type==='desc'">
							<page-desc :descdata="item" :id="item.info_category"></page-desc>
						</template>
						<template v-if="item.info_group_type==='chart'">
							<page-chart :chartsdata="item" :id="item.info_category"></page-chart>
						</template>
						
						<template v-if="item.info_group_type==='people_card_obj' && item.obj == 'show' ">
							
							<page-team :teamdata="item.chunk_data" :id="item.info_category"></page-team>
						</template>
					</template>
				</template>
			</template>
			<!-- 风险 -->
			<page-risk :riskdata="risk"></page-risk>
			
			<!-- 快讯 -->
			<page-news-list :name="ico_info.name"></page-news-list>
		</div>
		<web-loading v-if="!get_data"></web-loading>
		<div class="rollto" id="roolto" @click="loadUp">
			<a href="javascript:;"></a>
		</div>
	</div>
</template>
<script>
	import Loadding from '../components/public/Loading.vue'
	import NavBar from  '../components/ico/Navbar.vue'
	import BodyTable from '../components/ico/BodyTable.vue' //表格
	import Desc from '../components/ico/Desc.vue' //Desc 模块 
	import Chart from '../components/ico/ChartBox.vue' //图标
	import Market from  '../components/ico/Market.vue'//市场
	import TeamBox from '../components/ico/TeamBox.vue'//团队
	import RiskBox from '../components/ico/Risk.vue' //风险
	import NewsList from '../components/ico/NewsList.vue'
	import {getBodyData} from '../gloab/ico.js'
	export default{
		data:function(){
			return{
				get_data:false,
				ico_info:{},
				currency_detail:{},
				data:{},
				risk:{},
				categoryData:[
				  {
				    name: "项目",
				    label: "project",
				    icon: "iconfont icon-tubiaozhizuomoban",
				    id: "#project"
				  },
				  {
				    name: "市场",
				    label: "market",
				    icon: "iconfont icon-shichangfenxi",
				    id: "#market"
				  },
				  {
				    name: "运营",
				    label: "operation",
				    icon: "iconfont icon-yunyingzhongxin",
				    id: "#operation"
				  },
				  {
				    name: "团队",
				    label: "team",
				    icon: "iconfont icon-tubiao-",
				    id: "#team"
				  },
				  {
				    name: "风险",
				    label: "risk",
				    icon: "iconfont icon-risk",
				    id: "#risk"
				  },
				  {
				    name: "代码",
				    label: "code",
				    icon: "iconfont icon-daima",
				    id: "#code"
				  },
				  {
				    name: "快讯",
				    label: "news",
				    icon: "fa fa-newspaper-o",
				    id: "#news"
				  }
				]
			}
		},
		components:{
			'web-ico-nav-bar':NavBar,
			'web-loading':Loadding,
			'page-table':BodyTable,
			'page-market':Market,
			'page-desc':Desc,
			'page-chart':Chart,
			'page-team':TeamBox,
			'page-risk':RiskBox,
			'page-news-list' : NewsList
		},
		mounted:function(){
			let me = this;
			let id = me.$route.params.id;
			me.getICOInfo(id);
		},
		methods:{
			getICOInfo(id){
				let me = this;
				$.get("//api.imrating.com/api/reports/" + id + "/", function(res) {
					document.title = `${document.title} ${res.data.currency.name}`;
					let data = res.data;
					me.ico_info = data.currency;
					me.currency_detail = data.currency_detail;
					let report_contents = data.data.report_contents;
					let result = getBodyData(report_contents);
					
					me.risk  = result.risk;
					me. data = result.data;
					me.get_data = true;
				}).error(function(res){
					me.$router.push('/404');
				})
			},
			loadUp(){
				$("html , body").animate({ scrollTop: 0 }, "slow");
			}
		},
		filters: {
			defaultRating(val) {
				if(!val){
					return '无';
				}
				return val;
			}
		}
	}
</script>
<style scoped="scoped">
	.web-content{
		text-align: left;
	}
	.col-md-6{
		position: relative;
		margin: 15px 0;
	}
	.ico-img{
		width: 100px;
		height: 100px;
		float: left;
	}
	.ico-name-box{
		position: absolute;
		left: 150px;
	}
	.name{
		font-size: 24px;
		color: #323232;
		margin: 15px 0 10px 0;
	}
	.name-en{
		color: #FFFFFF;
		background-color: #0F7DEA;
		border-radius: 7px;
		padding: 5px 10px;
		text-align: center;
	}
	.number-info{
		line-height: 100px;
		float: right;
		font-size: 28px;
		color: #333;
	}
	.fenshu{
		color: #1875f0;
		font-size: 34px;
	}
	@media (max-width: 768px){
		.ico-img{
			width: 60px;
			height: 60px;
			float: left;
		}
		.ico-name-box{
			left: 120px;
		}
		.name{
			margin: 5px 0 10px 0;
			font-size: 16px;
		}
		.number-info{
			line-height: 60px;
			float: left;
			font-size: 24px;
			color: #333;
		}
		.fenshu{
			color: #1875f0;
			font-size: 30px;
		}
	}
	.rollto{
		  position: fixed;
	    right: 20px;
	    bottom: 20px;
	    z-index: 999;
			display: none;
	}
	.rollto a {
	    overflow: hidden;
	    display: block;
	    width: 50px;
	    height: 50px;
	    background: url(../assets/images/backtop.png) no-repeat 0 0;
	    text-indent: -999px;
	}
</style>